// Variables
$color-palette-wb-white: #fff;
$color-palette-light-light-color-02: #eff4f9;
$color-palette-light-light-color-06: #ccd3db;
$paragraph-heading-color: #242e42;
$neutral-neutral-15: #242e42;

// Mixins
@mixin cardBase {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  border-radius: 4px;
  background: $color-palette-wb-white;
  box-shadow: 0px 4px 8px 0px rgba(36, 46, 66, 0.06);
  padding: 16px;
}

@mixin itemBase {
  border-radius: 22px;
  padding: 12px 32px;
}

@mixin textRegular {
  color: $paragraph-heading-color;
  font-family: PingFang SC;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  font-feature-settings: 'clig' off, 'liga' off;
}

@mixin textTitle {
  color: $paragraph-heading-color;
  font-family: PingFang SC;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  font-feature-settings: 'clig' off, 'liga' off;
}

.card + .card {
  margin-top: 12px;
}

.card {
  @include cardBase;

  &.hideContent {
    gap: 0;
  }
  .title {
    @include textTitle;
  }

  .header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .item {
    @include itemBase;
    border: 1px solid $color-palette-light-light-color-06;
    background: $color-palette-light-light-color-02;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .item + .item {
    margin-top: 12px;
  }

  .kv {
    @include textRegular;
  }
  .content {
    max-height: 1000px;
    animation: max-height 0.3s ease-in-out;
    overflow: hidden;
    &.hide {
      max-height: 0;
      animation: max-height 0.3s ease-in-out reverse;
    }
  }
}
